<template>
  <div v-loading="loading" class="root">
    <el-container direction="vertical">
      <el-container class="radios" direction="horizontal">
        <el-radio @change="radio_change" v-model="radio" label="1">一周（7天）</el-radio>
        <el-radio @change="radio_change" v-model="radio" label="2">一个月（30天）</el-radio>
        <el-radio @change="radio_change" v-model="radio" label="3">自定义</el-radio>
      </el-container>
      <el-collapse-transition>
        <el-slider class="slider" v-show="slider_show" @change="slide_change" v-model="slider_value" max="150" show-input>
        </el-slider>
      </el-collapse-transition>
      <el-input class="input_key" v-model="input_note" @change="input_change" placeholder="密钥"></el-input>
      <div>
        <div class="generate_button">
          <el-button class="button" type="primary" size="medium" @click="extend_click">续费</el-button>
        </div>
      </div>
      <transition name="el-fade-in-linear">
        <el-alert v-show="alert_show" class="alert" v-bind:title="alert_title" v-bind:type="alert_type"
          v-bind:description="alert_description" show-icon style="text-align: left;">
        </el-alert>
      </transition>
    </el-container>
  </div>
</template>

<script>
  import {
    ref
  } from "@vue/reactivity";
  import {
    ElMessage
  } from "element-plus";
  import axios from 'axios';

  export default {
    setup() {
      return {
        input_note: ref(""),
      };
    },
    data() {
      return {
        duration: 7,
        key: "",
        radio: "1",
        slider_show: false,
        slider_value: 1,
        alert_show: false,
        alert_type: "success",
        alert_title: "这是标题",
        alert_description: "这是内容",
        loading: false
      };
    },
    methods: {
      radio_change(value) {
        this.slider_show = value == 3;
        if (value == 1) {
          this.duration = 7;
        } else if (value == 2) {
          this.duration = 30;
        } else {
          this.duration = this.slider_value;
        }
      },
      extend_click() {
        if (this.key == "") {
          ElMessage.error("密钥不能为空");
          return;
        }
        this.$confirm("是否为 " + this.key + " 续费 " + this.duration + " 天？", "仔细确认信息", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true;
          axios({
              url: "/api/extendTime",
              method: "post",
              params: {
                auth: localStorage.getItem("auth_key"),
                key: this.key,
                duration: this.duration
              }
            })
            .then(res => {
              this.alert_show = true;
              this.alert_type = "success";
              this.alert_title = "续费成功";
              var content = "密钥：" + res.data.key + "\n续费时长：" + this.duration + "天；累计充值时长：" + res.data.duration +
                "天\n备注：" + res
                .data.note;
              this.alert_description = content;
              console.log(res);
              this.loading = false;
            })
            .catch(err => {
              console.error(err);
              this.alert_show = true;
              this.alert_type = "error";
              this.alert_title = "续费失败";
              if (err.response) {
                this.alert_description = err.response.messag
              } else {
                this.alert_description = err.message;
              }
              this.loading = false;
            })
        })
      },
      input_change(input_value) {
        this.key = input_value;
      },
      slide_change(slide_value) {
        this.duration = slide_value;
      },
    },
  };
</script>

<style>
  .root {
    width: 400px;
    text-align: center;
  }


  .slider {
    margin-top: 20px;
    width: 370px;
  }

  .input_key {
    width: 380px;
    margin-top: 20px;
  }

  .generate_button {
    margin-top: 20px;
  }

  .button {
    width: 100%;
  }

  .alert {
    margin-top: 20px;
    white-space: pre-wrap;
  }
</style>